<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
<div id="app">
    <h1>{{ title }}</h1>
    <!--组件的使用就是HTML标签的调用写法-->
    <mycomponent1></mycomponent1>
    <mycomponent2></mycomponent2>
</div>

</body>
<script src="./lib/vue.js"></script>
<script type="text/javascript">
    /*组件化的开发思想：
    * 1. 定义组件
    *   1.1 全局组件
    *
    *   1.2 局部组件
    * 2. 使用组件
    *   组件在调用的时候，会使用 template 里面的字符串替换到调用处。
    * */

    /*全局组件 必须写在实例化代码之前*/
    /*
    * 开发者编写的组件，其实就是相当于扩充了 html 的标签。就相当于用户自己开发了一个新的 html 标签。
    *
    * 参数1：组件的名称，我们也可以叫做标签名称
    * 参数2：组件对象，必须存在一个 template属性，该属性就是我们组件结构
    *   组件的构成：
    *       1. 结构 2. 样式 行内，或者 类名 3.行为 4. 数据 5. 生命周期函数
    *
    * */
    Vue.component('mycomponent1', {
        /*对于组件来说，组件的数据是通过一个函数的返回值来进行定义的*/
        data: function () {
            return {
                title: '我是全局组件!!!！',
                arr: [12, 23, 34],
            }
        },

        /*一般我们是生命周期函数里面调用后台的接口，发送网络请求，获取数据，进行渲染*/
        /*
        *
        *  https://cn.vuejs.org/v2/api/#%E9%80%89%E9%A1%B9-%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E9%92%A9%E5%AD%90
        *
        * */
        created: function () {
            console.log('created');
        },
        updated: function () {
            console.log('updated');
        },
        methods: {
            clickHandler: function (event) {
                console.log(event);
                alert('我被点击了！');
            },
        },
        template: '<div> <ul><li v-for="ele in arr">{{ ele }}</li></ul>  <h1 style="color: #f00;" class="title">{{ title }}！</h1> <button @click="clickHandler">点击我</button></div>'
    });

    Vue.component('mycomponent2', {
        template: '<h1>我是全局组件2！</h1>'
    });

    var vm = new Vue({
        el: '#app',
        data: {
            title: 'hi vuejs!',
        }
    });
</script>

</html>
